<template>
	<view >
		<view class="login">
			<!-- <view class="login-btn" @tap="prompt">
		                <prompt ref="prompt" @onConfirm="onConfirm" @onCancel="onCancel" title="提示" :text="promptText"></prompt>
		            </view> -->
			<view class="login-btn" @click="show"> ssssss
				<view class="prompt-box" v-if="isHidden" @click.stop="!show">
					<view class="prompt-content contentFontColor">
						<view class="prompt-title">{{title}}</view>
						<view class="prompt-text">{{text}}</view>
						<input class="prompt-input" type="text" @input="_input" :value="cost" />
						<view class="prompt-btn-group">
							<button class="btn-item prompt-cancel-btn contentFontColor"
								@tap="_cancel">{{btn_cancel}}</button>
							<button class="btn-item prompt-certain-btn" @tap="_confirm">{{btn_certain}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>


	export default {
		data() {
			return {
				// promptText: '',
				// isHidden: true,
				title: '提示',
				btn_cancel: '取消',
				btn_certain: '确定',
				text: '',
				multipleSlots: true, // 在组件定义时的选项中启用多slot支持
				isHidden: false,
				cost: ''
			}
		},
		methods: {
			hide: function() {
				this.isHidden = true;
			},

			show: function() {
				this.isHidden = !this.isHidden;
			},
			/*
			 * 内部私有方法建议以下划线开头
			 * triggerEvent 用于触发事件
			 */
			_cancel() {
				//触发cancel事件，即在外部，在组件上绑定cancel事件即可，bind:cancel，像绑定tap一样
				this.cost = '';
				this.isHidden = !this.isHidden;

			},
			_confirm() {
				let _cost = this.cost;
				if (_cost == '') {
					uni.showModal({
						title: '你还未输入',
					})
					return;
				} else {
					// this.$refs.prompt.hide();
					uni.showModal({
						title: '提示',
						content: '你输入的是:' + _cost,
						showCancel: false,
						confirmText: "确定"
					})
				}
			},
			_input(e) {
				//将参数传出去，这样在getInput函数中可以通过e去获得必要的参数
				//this.triggerEvent("getInput",e.detail);
				this.cost = e.detail.value;
			},
			onShow() {}
		},
	}
</script>

<style lang="scss">
	/* 登录按钮 */
	.login {
		width: 100%;
		margin: auto;
		margin-top: 140rpx;
	}

	.login .login-btn {
		width: 86%;
		height: 90rpx;
		border-radius: 45rpx;
		line-height: 90rpx;
		font-size: 40rpx;
		color: #a4c572;
		background-color: #FFFFFF;
		text-align: center;
		margin: auto;
	}

	/* components/vas-prompt/vas-prompt.wxss */
	.prompt-box {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
		background: rgba(209, 209, 209, 0.5);
	}

	.prompt-content {
		position: absolute;
		left: 50%;
		top: 40%;
		width: 80%;
		max-width: 600rpx;
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		box-sizing: bordre-box;
		transform: translate(-50%, -50%);
		overflow: hidden;
		background: #fff;
	}

	.prompt-title {
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 40rpx;
		border-bottom: 2rpx solid gray;
	}

	.prompt-input {
		margin: 8%;
		padding: 10rpx 15rpx;
		width: 80%;
		height: 85rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
	}

	.prompt-btn-group {
		display: flex;
	}

	.btn-item {
		width: 35%;
		margin-bottom: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: white;
		justify-content: space-around;
	}

	.prompt-certain-btn {
		color: white;
		background-color: #4FEBDE;
	}

	.prompt-cancel-btn {
		border: 1px solid #4FEBDE;
	}

	.contentFontColor {
		color: #868686;
	}

	.prompt-text {
		margin-top: 15rpx;
		font-size: 38rpx;
	}
</style>
